<template>
  <div class="ai-evaluation">
    <div class="evaluation-header">
      <h3>AI 分析</h3>
      <div class="difficulty-info">
        当前难度: {{ currentDifficulty }}
        <div class="difficulty-trend">
          趋势: {{ difficultyTrend }}
        </div>
      </div>
    </div>

    <div class="performance-stats">
      <div class="stat-item">
        <div class="stat-label">移动质量</div>
        <div class="stat-value">{{ averageMoveQuality.toFixed(2) }}</div>
        <div class="quality-bar">
          <div 
            class="quality-fill"
            :style="{ width: `${averageMoveQuality * 100}%` }"
            :class="getQualityClass(averageMoveQuality)"
          ></div>
        </div>
      </div>

      <div class="stat-item">
        <div class="stat-label">胜率</div>
        <div class="stat-value">{{ (winRate * 100).toFixed(1) }}%</div>
      </div>

      <div class="stat-item">
        <div class="stat-label">最近表现</div>
        <div class="recent-games">
          <span 
            v-for="(game, index) in recentGames" 
            :key="index"
            :class="game.result"
          >
            ●
          </span>
        </div>
      </div>
    </div>

    <div class="suggestions">
      <h4>改进建议</h4>
      <ul>
        <li v-for="(suggestion, index) in suggestions" :key="index">
          {{ suggestion }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useAdaptiveAI } from '../composables/useAdaptiveAI'

const {
  currentDifficulty,
  performanceHistory,
  evaluateMoveQuality
} = useAdaptiveAI()

const averageMoveQuality = computed(() => 
  performanceHistory.value.averageMoveQuality
)

const winRate = computed(() => {
  const total = performanceHistory.value.wins + 
                performanceHistory.value.losses + 
                performanceHistory.value.lastGames.filter(g => g.result === 'draw').length
  return total > 0 ? performanceHistory.value.wins / total : 0
})

const recentGames = computed(() => 
  performanceHistory.value.lastGames.slice(-5)
)

const difficultyTrend = computed(() => {
  const recentPerformance = performanceHistory.value.lastGames
    .slice(-3)
    .reduce((acc, game) => acc + game.moveQuality, 0) / 3

  if (recentPerformance > 0.7) return '↗️ 上升'
  if (recentPerformance < 0.4) return '↘️ 下降'
  return '→ 稳定'
})

const suggestions = computed(() => {
  const suggestions = []
  const performance = performanceHistory.value

  if (performance.averageMoveQuality < 0.5) {
    suggestions.push('建议多关注棋子的保护和威胁')
  }
  if (performance.losses > performance.wins * 2) {
    suggestions.push('建议降低难度，巩固基本功')
  }
  if (performance.averageMoveQuality > 0.8) {
    suggestions.push('可以尝试提高难度，挑战自我')
  }

  return suggestions
})

const getQualityClass = (quality: number) => {
  if (quality > 0.8) return 'excellent'
  if (quality > 0.6) return 'good'
  if (quality > 0.4) return 'average'
  return 'poor'
}
</script>

<style scoped>
.ai-evaluation {
  padding: 15px;
  background: #f5f5f5;
  border-radius: 8px;
}

.evaluation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.difficulty-info {
  text-align: right;
}

.performance-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.stat-item {
  background: white;
  padding: 10px;
  border-radius: 4px;
}

.quality-bar {
  height: 8px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 5px;
}

.quality-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.quality-fill.excellent { background: #4CAF50; }
.quality-fill.good { background: #8BC34A; }
.quality-fill.average { background: #FFC107; }
.quality-fill.poor { background: #F44336; }

.recent-games {
  display: flex;
  gap: 5px;
}

.recent-games .win { color: #4CAF50; }
.recent-games .loss { color: #F44336; }
.recent-games .draw { color: #FFC107; }

.suggestions {
  background: white;
  padding: 15px;
  border-radius: 4px;
}

.suggestions ul {
  margin: 0;
  padding-left: 20px;
}

.suggestions li {
  margin: 5px 0;
}
</style> 